<script lang="ts" setup>
import { toggleDark } from '@/composables'
import { ref } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { ArrowDown } from '@element-plus/icons-vue'
//头像下拉菜单
const avatarSelect = (key: any) => {
  switch (key) {
    case 1:
      // router.push({ name: 'Setting' })
      updataPassword()
      break
    case 2:
      doLogout()
      break
  }
}
const updataModal = ref(false)
// 修改密码
const updataPassword = () => {
  updataModal.value = true
}

function handleClick() {
  ElMessageBox.confirm('确定使用这个组件吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      // 用户点击确认按钮后的处理逻辑
      ElMessage.success('组件已确定使用')
      // 在这里执行你想要的操作，比如使用某个组件
    })
    .catch(() => {
      // 用户点击取消按钮后的处理逻辑
      ElMessage.info('用户取消了组件的使用')
      // 在这里执行你想要的操作，比如不使用该组件
    })
}

// 退出登录
const doLogout = () => {
  // 点击按钮的事件处理函数
  handleClick()
}
</script>

<template>
  <el-menu class="el-menu-demo" mode="horizontal">
    <el-menu-item index="1">Element Plus</el-menu-item>
    <el-sub-menu index="2">
      <template #title>Workspace</template>
      <el-menu-item index="2-1">item one</el-menu-item>
      <el-menu-item index="2-2">item two</el-menu-item>
      <el-menu-item index="2-3">item three</el-menu-item>
      <el-sub-menu index="2-4">
        <template #title>item four</template>
        <el-menu-item index="2-4-1">item one</el-menu-item>
        <el-menu-item index="2-4-2">item two</el-menu-item>
        <el-menu-item index="2-4-3">item three</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>
    <el-menu-item index="3" disabled>Info</el-menu-item>
    <el-menu-item index="4">Orders</el-menu-item>
    <el-menu-item h="full" @click="toggleDark()">
      <button
        class="border-none w-full bg-transparent cursor-pointer"
        style="height: var(--ep-menu-item-height)"
      >
        <i inline-flex i="dark:ep-moon ep-sunny" />
      </button>
    </el-menu-item>
    <div class="flex-grow" />
    <el-menu-item index="6">Processing Center</el-menu-item>
    <el-menu-item index="5" style="height: 100%">
      <template #title>
        <el-dropdown trigger="hover" @select="avatarSelect">
          <div class="avatar">
            <el-avatar
              :style="{
                color: '#000',
                backgroundColor: '#eee',
                width: '43px',
                height: '43px'
              }"
              round
            >
              <!-- {{
              info.userName
                ? info.userName.length > 3
                  ? info.userName.substring(0, 1)
                  : info.userName
                : ''
            }} -->
              文字
            </el-avatar>
          </div>

          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item :icon="ArrowDown" command="1">
                修改密码
              </el-dropdown-item>
              <el-dropdown-item :icon="ArrowDown" command="2" @click="doLogout">
                退出登录
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </template>
    </el-menu-item>
  </el-menu>
</template>

<style lang="scss" scoped>
.flex-grow {
  flex-grow: 1;
}
</style>
